<template>
	<view id="home">
		<uni-nav-bar background-color="#02A8F4" left-icon="back" right-icon='gear' color="#fff"
		 @click-left='goBack' @click-right='toOther' status-bar="true"></uni-nav-bar>
			<view class="btn-area" v-if="isClick">
				<view class="mask" @tap="close"></view>
				<view class="drop">
					<view @tap="toUpdate">修改密码</view>
					<view @tap="logOut">安全退出</view>
				</view>
			</view>
		<view class="cont">
			<view class="today" @tap="getIn">
					<image src="../../static/card-blue@2x.png" class="stock"></image>
					<view class="top">
						<view class="left">
							<text>今日入库</text>
							<view class="num">
								16
							</view>
						</view>
						<image src="../../static/icon-enter@2x.png" class="keepIn"></image>
					</view>
			</view>
			<view class="today" @tap="getOut">
					<image src="../../static/card-yellow@2x.png" class="stock"></image>
					<view class="bottom">
						<view class="left">
							<text>今日出库</text>
							<view class="num">
								16
							</view>
						</view>
						<image src="../../static/icon-out@2x.png" class="keepIn"></image>
					</view>
					
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav/uni-nav-bar.vue"
	import Icon from '../../components/uni-nav/uni-icon.vue'
	import uniStatusBar from '../../components/uni-nav/uni-status-bar.vue'

	export default{
		components: {
			uniNavBar,
			Icon,
			uniStatusBar,
		},
		data(){
			return{
				isClick:false,
				title: 'navigator'
			}
		},
		methods:{
			// 后退
			goBack(){
				uni.navigateBack({
						delta: 1
				});
			},
			// 关闭下拉菜单
			close(){
				this.isClick = false;
			},
			// 点击设置
			 toOther() {
				 this.isClick = true;
			  },
			  // 入库
			 getIn(){
				 uni.navigateTo({
				 	url:'/pages/ware/wareIn'
				 })
			 },
			 // 出库
			 getOut(){
				 uni.navigateTo({
					url:'/pages/out/out'
				 })
			 },
			 // 修改密码
			 toUpdate(){
				 uni.navigateTo({
					url:'/pages/home/update'
				 })
			 },
			 // 注销
			logOut(){
				uni.removeStorage({
					key: 'userInfo',
					success: function (res) {
						uni.showToast({
							icon: 'none',
							title: '注销成功，返回登录'
						});
					}
				});
				setTimeout(()=>{
					uni.navigateBack({
							delta: 1
					});
				},2e3)
			},   
		}
	}
</script>

<style>
	.el-dropdown {
		vertical-align: top;
	 }
	 .el-dropdown + .el-dropdown {
		margin-left: 15px;
	 }
	 .el-icon-arrow-down {
		font-size: 12px;
	 }
	 .cont{
		 width:700upx;
		 height: 800upx;
		 margin: auto;
		 /* background-color: #FFC0CB; */
		 position: relative;
	 }
	 .today{
		 width:100%;
		 height: 300upx;
		 /* background-color: lightblue; */
	 }
	 .stock{
		 width:100%;
		 height: 100%;
	 }
	.top{
		width:100%;
		height: 300upx;
		border-radius: 14upx;
		box-shadow: gray 0 0 20upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position:absolute;
		top:0;
	}
	.bottom{
		width:100%;
		height: 300upx;
		border-radius: 14upx;
		box-shadow: gray 0 0 20upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position:absolute;
		top:350upx
	}
	.today:first-child{
		margin-top: 100upx;
		margin-bottom: 50upx;
	}
	.left text{
		font-size: 30upx;
		color: #fff;
	}
	.set{
		width:48upx;
		height: 52upx;
		float:right;
	}
	.keepIn{
		width: 182upx;
		height: 162upx;
	}
	.num{
		font-size: 90upx;
		text-align: center;
		color: #fff;
	}
	.mask{
		width: 100%;
		height: 1330upx;
		background-color: rgba(255,255,255,0);
		position:absolute;
		top:0;
		z-index:100;
	}
	.drop{
		width:174upx;
		height: 157upx;
		position:absolute ;
		top: 100upx;
		left:70%;
		z-index: 200;
		border-radius: 10upx;
		background-color: #fff;
	}
	.drop view{
		height: 78upx;
		font-size: 24upx;
		text-align: center;
		line-height: 78upx;
	}
	.drop view:first-child{
		border-bottom: 1px solid #ddd;
	}

</style>